<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }

        .xt_msg_list {
            padding: 1rem 0.75rem;
            background-color: #fff;
            line-height: 1.5;
            margin: 0.45rem 0;
        }

        .msg_title_time {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .msg_title {
            font-size: 0.75rem;
            font-weight: 600;
            color: #333;
        }

        .msg_time {
            font-size: 0.55rem;
            color: #999;
        }

        .xt_msg_cnt {
            font-size: 0.6rem;
            color: #666;
            text-align: justify;
        }
    </style>
</head>

<body>
    <ul class="xt_msg_box">
        <li v-for="msg in xtmsg_list" class="xt_msg_list">
            <div class="msg_title_time">
                <span class="msg_title">{{msg.title}}</span>
                <span class="msg_time">{{msg.addtime}}</span>
            </div>
            <div class="xt_msg_cnt">
                {{msg.describe}}
            </div>
        </li>
    </ul>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var xt_msg_list;
    apiready = function() {

        // 实例化vue
        xt_msg_list = new Vue({
            el: '.xt_msg_box',
            data: {
                xtmsg_list: []
            },
            mounted: function() {
                var $_this = this;
                // 页面加载后获取系统消息列表数据
                api.ajax({
                    url: window.Url.Community_informationList,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token')
                        },
                    }
                }, function(ret, err) {
                    if (ret) {
                        console.log("获取到的系统消息列表数据---" + JSON.stringify(ret));
                        if (ret.re == 1) {
                            for (var i = 0; i < ret.data.list.length; i++) {
                                $_this.xtmsg_list.push(ret.data.list[i]);
                            }
                        } else if (ret.re == 2) {
                            api.toast({
                                msg: '暂无系统消息',
                                duration: 2000,
                                location: 'bottom'
                            });
                        } else if (ret.re == -1) {
                            api.toast({
                                msg: '请先登录',
                                duration: 2000,
                                location: 'bottom'
                            });
                        }
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
            }
        })

    };



    //打开提示框
    var dialog = new auiDialog({});

    function open_diglog() {
        $('.cover').show();
        dialog.alert({
            title: "系统消息",
            msg: '您确定要清空系统消息？',
            buttons: ['取消', '确定']
        }, function(ret) {
            if (ret) {
                api.execScript({
                    script: 'close_cover();'
                });
                if (ret.buttonIndex == 2) {
                    $('.xt_msg_box').html("");
                    // 请求清空系统消息的接口
                    api.ajax({
                        url: window.Url.Community_delInformation,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('user_data').token
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // alert( JSON.stringify( ret ) );
                            api.toast({
                                msg: ret.info,
                                duration: 2000,
                                location: 'bottom'
                            });

                            if(ret.re==1){
                              xt_msg_list.xtmsg_list = [];
                            }

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                }
            }
        })
    }

</script>

</html>
